<template>
	<div class="person">
		<h2>人员列表，上方一共有{{newsList.length}}条新闻</h2>
		<input @keyup.enter="handleEnter" type="text" placeholder="输入人名按回车">
		<ul>
			<li v-for="p in persons" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import {nanoid} from 'nanoid'

	export default {
		name:'Person',
		computed:{
			...mapState(['persons','newsList'])
		},
		methods: {
			handleEnter(event){
				const {value} = event.target
				const personObj ={id:nanoid(),name:value}
				this.$store.commit('ADD_PERSON',personObj)
			}
		},
	}
</script>

<style scoped>
	.person{
		background-color: cadetblue;
		padding: 20px;
	}
</style>